Xamarin.Android イメージの描画

SIN

2015.11.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 イメージの描画

Xamarin.Androidでは、CanvasのDrawBitmapを使用して、画像を描画することができます。

DrawBitmap()は、各種のパラメータを取得できます。

DrawBitmap(Bitmap, Single, Single, Paint) // 位置指定
DrawBitmap(Bitmap, Rect, Rect, Paint) // クリッピングと拡大縮小
DrawBitmap(Bitmap, Rect, RectF, Paint) // クリッピングと拡大縮小
DrawBitmap(Bitmap, Matrix, Paint) // Matrixを使用

サンプルは、ViewクラスのDraw()メソッドをオーバーライドしたものになっています。Xamarin.AndroidでViewのサブクラス化がピンとこない場合は、下記をご参照ください。

Xamarin.Android テンプレート(Blank App)

2 Bitmapの生成

DrawBitmapで使用する、Bitmapオブジェクトは、リソースファイルから生成できます。なお、ここで注意が必要なのは、「拡張子を指定しない」事です。ネイティブと同じく、各種解像度の画像を準備できるため、.（ドット）が含まれるファイル名はやめた方が賢明です。

class MyView : View {
    Bitmap _bitmap = null;
    public MyView(Context context) : base(context) {

        //  リソース名に拡張子が不要
        var res_id = context.Resources.GetIdentifier("classmethod", "drawable", context.PackageName);
        if (res_id != 0) {
            _bitmap = BitmapFactory.DecodeResource(context.Resources, res_id);
        }
    }

    public override void Draw(Canvas canvas) {
        base.Draw(canvas);
        
        // ここに描画コードを追加する
        // canvas.DrawBitmap(_bitmap, 0, 0, null);
    }
}

画像ファイルは、Resourcesの下のdrawableに配置します。

3 各種の描画例

それでは、各種の描画パターンを試してみます。

(1) 位置指定

DrawBitmapメソッドに描画の基準座標を与えて、サイズ変更することなく、そのまま描画します。

public override void Draw(Canvas canvas) {
    base.Draw(canvas);

     // 座標0,0に描画
     canvas.DrawBitmap(_bitmap, 0, 0, null);
}

(2) サイズの取得

Bitmapオブジェクトは、サイズを取得する事ができるので、これを使用すると、元画像のサイズに比例したサイズ変更が可能です。サンプルでは元画像のサイズを取得して、半分のサイズで描画しています。

public override void Draw(Canvas canvas) {
    base.Draw(canvas);

    // 座標0､0に半分のサイズで表示する
    var r0 = new Rect(0, 0, _bitmap.Width, _bitmap.Height);
    var r1 = new Rect(0, 0, _bitmap.Width/2, _bitmap.Height/2);
    canvas.DrawBitmap(_bitmap, r0, r1, null);
}

(3) 拡大・縮小表示

描画範囲と、描画サイズを指定する事で拡大・縮小が可能です。

public override void Draw(Canvas canvas) {
    base.Draw(canvas);

    // 座標0､0にサイズ600×600で画像を表示する
    var r0 = new Rect(0, 0, _bitmap.Width, _bitmap.Height);
    var r1 = new Rect(0, 0, 600, 600);
    canvas.DrawBitmap(_bitmap, r0, r1, null);
}

(4) 部分表示

範囲を同じにすれば、部分描画になります。元画像のサイズは変更されていません。

public override void Draw(Canvas canvas) {
    base.Draw(canvas);
    
    // 座標0､0・サイズ600×600で画像の一部を表示する（サイズ変更なし）
    var rect = new Rect(0, 0, 600, 600);
    canvas.DrawBitmap(_bitmap, rect, rect, null);
}

(5) 透過表示

Paintオブジェクトを生成して、そのAlpha値を変更することで、透過表示しています。

public override void Draw(Canvas canvas) {
    base.Draw(canvas);
    // 画像のオリジナルのサイズを取得
    var r0 = new Rect(0, 0, _bitmap.Width, _bitmap.Height);

    // アルファを変化させるため、Paintオブジェクトを用意する
    var paint = new Paint();
    paint.Alpha = 0; 

    var x = 0;
    var y = 0;
    var size = 300;

    foreach (var n in Enumerable.Range(0, 5)) {
        // 拡大後のサイズ
        var r1 = new Rect(x, y, size, size);
        canvas.DrawBitmap(_bitmap, r0, r1, paint);

        // 表示座標をずらす
        x += 40;
        y += 40;
        // サイズを少しずつ大きくする
        size += 100;
        // alpha値を0～255の範囲で徐々に変化させる
        paint.Alpha += 255/5;
    }
}